<template>
  <div class="notification-settings">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>通知设置</span>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
        </div>
      </template>

      <el-form
        ref="settingsFormRef"
        :model="settingsForm"
        label-width="120px"
      >
        <el-divider>课程相关通知</el-divider>

        <el-form-item label="站内信通知">
          <el-switch
            v-model="settingsForm.COURSE.INTERNAL"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="短信通知">
          <el-switch
            v-model="settingsForm.COURSE.SMS"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="邮件通知">
          <el-switch
            v-model="settingsForm.COURSE.EMAIL"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="APP推送">
          <el-switch
            v-model="settingsForm.COURSE.PUSH"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-divider>会员卡相关通知</el-divider>

        <el-form-item label="站内信通知">
          <el-switch
            v-model="settingsForm.CARD.INTERNAL"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="短信通知">
          <el-switch
            v-model="settingsForm.CARD.SMS"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="邮件通知">
          <el-switch
            v-model="settingsForm.CARD.EMAIL"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="APP推送">
          <el-switch
            v-model="settingsForm.CARD.PUSH"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-divider>系统通知</el-divider>

        <el-form-item label="站内信通知">
          <el-switch
            v-model="settingsForm.SYSTEM.INTERNAL"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="短信通知">
          <el-switch
            v-model="settingsForm.SYSTEM.SMS"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="邮件通知">
          <el-switch
            v-model="settingsForm.SYSTEM.EMAIL"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="APP推送">
          <el-switch
            v-model="settingsForm.SYSTEM.PUSH"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type {
  NotificationSetting,
  UpdateSettingsRequest
} from '@/types/api/notification'
import { settingApi } from '@/api/modules/notification'
import { preventDuplicateSubmit } from '@/utils'

// 表单相关
const settingsFormRef = ref()
const loading = ref(false)

// 设置表单数据
const settingsForm = reactive({
  COURSE: {
    INTERNAL: true,
    SMS: true,
    EMAIL: false,
    PUSH: true
  },
  CARD: {
    INTERNAL: true,
    SMS: true,
    EMAIL: false,
    PUSH: true
  },
  SYSTEM: {
    INTERNAL: true,
    SMS: false,
    EMAIL: false,
    PUSH: true
  },
  OTHER: {
    INTERNAL: true,
    SMS: false,
    EMAIL: false,
    PUSH: true
  }
})

type SettingType = 'COURSE' | 'CARD' | 'SYSTEM' | 'OTHER'
type ChannelType = 'INTERNAL' | 'SMS' | 'EMAIL' | 'PUSH'

// 获取通知设置
const getSettings = async () => {
  try {
    loading.value = true
    const res = await settingApi.getSettings()
    const settings = res.data.data.settings

    // 重置表单
    Object.keys(settingsForm).forEach(type => {
      Object.keys(settingsForm[type as SettingType]).forEach(channel => {
        settingsForm[type as SettingType][channel as ChannelType] = false
      })
    })

    // 根据返回的设置更新表单
    settings.forEach(setting => {
      if (settingsForm[setting.type] && settingsForm[setting.type][setting.channel] !== undefined) {
        settingsForm[setting.type][setting.channel] = setting.isEnabled
      }
    })
  } catch (error) {
    ElMessage.error('获取通知设置失败')
  } finally {
    loading.value = false
  }
}

// 保存设置
const saveSettings = async () => {
  try {
    const settings: NotificationSetting[] = []

    // 构造设置数据
    Object.keys(settingsForm).forEach(type => {
      Object.keys(settingsForm[type as SettingType]).forEach(channel => {
        settings.push({
          type: type as SettingType,
          channel: channel as ChannelType,
          isEnabled: settingsForm[type as SettingType][channel as ChannelType]
        })
      })
    })

    const requestData: UpdateSettingsRequest = { settings }

    // 使用防重复提交保护
    await preventDuplicateSubmit('update_notification_settings', async () => {
      try {
        await settingApi.updateSettings(requestData)
        ElMessage.success('保存成功')
      } catch (error: any) {
        ElMessage.error('保存失败')
        throw error // 重新抛出错误以确保防重复提交正确处理
      }
    })
  } catch (error: any) {
    // 防重复提交保护捕获的错误
    if (error.message === '请勿重复提交') {
      ElMessage.warning('请勿重复提交')
    }
  }
}

// 生命周期
onMounted(() => {
  getSettings()
})
</script>

<style scoped>
.notification-settings {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-divider {
  margin: 30px 0 20px 0;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>
